import React from 'react';
import {View, TextInput, StyleSheet, Text} from 'react-native';
import PropTypes from 'prop-types';
import {getRealSize, Touchable} from '../utils';
import IconFont from '../resource/iconfont';
import ThemeStyles from '../styles';
import {I18n} from '../reducers/intl';

export default class Search extends React.Component {
  static propsTypes = {
    onChange: PropTypes.func,
    onSearch: PropTypes.func.isRequired,
    value: PropTypes.string,
  };

  static defaultProps = {
    onChange: () => {},
    onSearch: () => {},
    value: '',
  };

  change = value => {
    const {onChange} = this.props;
    if (onChange) {
      onChange(value);
    }
  };

  search = () => {
    const {onSearch} = this.props;
    if (onSearch) {
      onSearch();
    }
  };

  render() {
    return (
      <View style={Styles.container}>
        <IconFont name="molaricon-test" size={16} color="#757575" />
        <TextInput
          style={Styles.input}
          {...this.props}
          numberOfLines={1}
          placeholderTextColor="#999999"
          underlineColorAndroid={'transparent'}
          onChangeText={this.change}
        />
        <Touchable onPress={this.search}>
          <Text style={Styles.search}>{I18n.t('button.search')}</Text>
        </Touchable>
      </View>
    );
  }
}

const Styles = StyleSheet.create({
  container: {
    borderColor: '#E8E8E8',
    borderWidth: 0,
    borderRadius: getRealSize(8),
    backgroundColor: '#f6f6f6',
    paddingHorizontal: getRealSize(10),
    paddingVertical: getRealSize(7),
    height: getRealSize(36),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    flex: 1,
  },
  search: {
    paddingHorizontal: getRealSize(12),
    color: ThemeStyles.Color.primary.color,
    textAlign: 'center',
    width: getRealSize(72),
  },
  input: {
    padding: 0,
    flex: 1,
    backgroundColor: 'transparent',
    marginLeft: getRealSize(8),
  },
});
